<template>
  <div>
    <div class="layout">
      <div class="register-container">
        <p>感谢您愿意出席北京2022年冬奥会! 请仔细阅读并填写本注册页面中的必填信息。您可以随时返回本页进行修改。</p>

        <p>以下是一些注意事项：</p>

        <p>1. 如果您不想在此时完成所有的必填信息（*），您可以保存并在以后修改您的注册信息。<br>
        2. 请注意，此项目名额有限，为了确保您能够参加，请在【2022年1月14日】之前完成这些信息。<br>
          3. 您的联系方式仅用于英特尔北京冬奥科技文化臻享之旅活动期间，实时发送日程安排变化以及紧急情况下使用。
        </p>

        <p>一旦完成项目注册，您会收到一封确认邮件。如果您没有收到这封邮件，请联系</p>
        <p style="color: #0068B5;">intel_guest_experience_2022@sedge-comm.com</p>
        <div class="guest-title" v-if="form.guestFlag > 0">我的随行嘉宾</div>
        <IntelSelect
            v-if="form.guestFlag != '-1'"
            label="选择状态*"
            v-model="form.guestFlag"
            class="register-input"
            :options="guestFlagOption"
            @change="(val)=> {form.guestFlag = val}"
        />
        <p></p>
        <p></p>
        <p></p>
        <Subtitle :text="$t('userForm.title1')"/>
        <div class="form">
          <IntelSelect
              :label="$t('userForm.salutation')"
              v-model="form.salution"
              class="register-input"
              :options="salutationOptions"
              @change="(val)=> {form.salution = val}"
          />
          <IntelInput
              :label="$t('userForm.lastName')"
              v-model="form.lastName"
              :placeholder="$t('userForm.lastName')"
              class="register-input"
          />
          <IntelInput
              :label="$t('userForm.firstName')"
              v-model="form.firstName"
              :placeholder="$t('userForm.firstName')"
              class="register-input"
          />
          <div class="input-group">
            <IntelInput
                :label="$t('userForm.preferredBadgeLastName')"
                v-model="form.preferredBadgeLastName"
                :placeholder="$t('userForm.preferredBadgeLastName')"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                :label="$t('userForm.preferredBadgeFirstName')"
                v-model="form.preferredBadgeFirstName"
                :placeholder="$t('userForm.preferredBadgeFirstName')"
                class="register-input"
            />
          </div>
          <IntelInput
              :label="$t('userForm.companyName')"
              v-model="form.companyName"
              :placeholder="$t('userForm.companyName')"
              class="register-input"
          />
          <IntelInput
              :label="$t('userForm.jobTitle')"
              v-model="form.jobTitle"
              :placeholder="$t('userForm.jobTitle')"
              class="register-input"
          />
          <div class="input-group">
            <IntelInput
                :label="$t('userForm.mobilePhoneNumber')"
                v-model="form.mobilePhoneNumber"
                :placeholder="$t('userForm.mobilePhoneNumber')"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                :label="$t('userForm.mobilePhoneType')"
                v-model="form.mobilePhoneType"
                :placeholder="$t('userForm.mobilePhoneType')"
                class="register-input"
            />
          </div>
          <IntelInput
              :label="$t('userForm.businessEmailAddress')"
              v-model="form.businessEmailAddress"
              :placeholder="$t('userForm.businessEmailAddress')"
              class="register-input"
              :disabled="true"
          />
          <div style="display: flex;">
          <IntelSelect2
              label="外套尺寸*"
              v-model="form.coatSize"
              :options="sizeOptions"
              @change="(val)=> {form.coatSize = val}"
              class="register-input"
          />
            <CoastSizeLink />
          </div>
          <div class="input-group">
            <IntelSelect
                label="是否已经接种过新冠疫苗*"
                v-model="form.vaccinationDetails"
                :options="yimiaoOptions"
                @change="(val)=> {form.vaccinationDetails = val}"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="出发城市"
                v-model="form.departureCity"
                placeholder="出发城市"
                class="register-input"
            />
          </div>
          <div style="color: red;padding-top: 15px; font-size: 14px;">
            * 观赛相关的防疫细则仍待北京冬奥组委最终审批发布；<br>
            * 由于北京2022年冬奥会实施观赛实名制，后续将有工作人员联系收集您的身份证信息及护照照片提交给奥组委申请观赛门票，最终能否成功以奥组委审核结果为准。
          </div>
          <div class="divider"></div>
          <Subtitle :text="$t('userForm.title2')"/>
          <div class="input-group">
            <IntelInput
                :label="$t('userForm.assistantLastName')"
                v-model="form.assistantLastName"
                :placeholder="$t('userForm.assistantLastName')"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                :label="$t('userForm.assistantFirstName')"
                v-model="form.assistantFirstName"
                :placeholder="$t('userForm.assistantFirstName')"
                class="register-input"
            />
          </div>
          <div class="input-group">
            <IntelInput
                :label="$t('userForm.assistantEmailAddress')"
                v-model="form.assistantEmail"
                :placeholder="$t('userForm.assistantEmailAddress')"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                :label="$t('userForm.assistantPhoneNumber')"
                v-model="form.assistantPhoneNumber"
                :placeholder="$t('userForm.assistantPhoneNumber')"
                class="register-input"
            />
          </div>
          <div class="divider"></div>
          <div class="input-group">
          <div class="primary-button" @click="handleSubmit">{{ $t('userForm.buttonSave') }}</div>
<!--            <div class="divider-space"></div>-->
<!--            <div class="ghost-button" @click="handleNext">{{ $t('userForm.buttonNext') }}</div>-->
          </div>
        </div>
      </div>
    </div>
    <Alert v-if="alertShow" @ok="() => alertShow = false" :content="alertContent"/>
  </div>
</template>

<script>
import IntelInput from "../../components/common/IntelInput";
import IntelSelect from "../../components/common/IntelSelect";
import IntelSelect2 from "../../components/common/IntelSelect2";
import Subtitle from "../../components/common/Subtitle";
import Alert from "../../components/common/Alert";
import {getGuest, getGuestAuto, getTravelAuto, getUserInfo, getUserInfoAuto, updateUserInfo} from "../../api/service";
import CoastSizeLink from "../../components/CoastSizeLink";

export default {
  name: "faq",
  components: {
    CoastSizeLink,
    IntelInput,
    IntelSelect,
    IntelSelect2,
    Alert,
    Subtitle
  },
  data: function () {
    return {
      form: {
        id: '',
        salution: this.$t('userForm.salutation'),
        firstName: '',
        lastName: '',
        preferredBadgeFirstName: "",
        preferredBadgeLastName: "",
        companyName: "",
        jobTitle: "",
        mobilePhoneNumber: "",
        mobilePhoneType: '',
        businessEmailAddress: "",
        assistantFirstName: "",
        assistantLastName: "",
        assistantEmail: "",
        assistantPhoneNumber: "",
        coatSize: '外套尺寸*',
        vaccinationDetails: '是否已经接种过新冠疫苗*',
        departureCity: ''
      },
      typeOptions: this.$t('dictionary.phoneType'),
      salutationOptions: this.$t('dictionary.salutation'),
      sizeOptions: ['S', 'M', 'L', 'XL', '2XL', '3XL'],
      guestFlagOption: [
        {
          name: '有',
          value: '1'
        },
        {
          name: '无',
          value: '0'
        },
        {
          name: '待定',
          value: '2'
        }
      ],
      alertShow: false,
      alertContent: '',
      yimiaoOptions: ['是', '否']
    }
  },
  mounted() {
    const user = JSON.parse(localStorage.overnight_userInfo)
    console.log(user)
    this.form = {
      id: user.id,
      salution: user.salution || this.$t('userForm.salutation'),
      firstName: user.firstName || '',
      lastName: user.lastName || '',
      preferredBadgeFirstName: user.preferredBadgeFirstName || '',
      preferredBadgeLastName: user.preferredBadgeLastName || '',
      companyName: user.companyName || '',
      jobTitle: user.jobTitle || '',
      mobilePhoneNumber: user.mobilePhoneNumber || '',
      mobilePhoneType: user.mobilePhoneType || '',
      businessEmailAddress: user.businessEmailAddress || '',
      assistantFirstName: user.assistantFirstName || '',
      assistantLastName: user.assistantLastName || '',
      assistantEmail: user.assistantEmail || '',
      assistantPhoneNumber: user.assistantPhoneNumber || '',
      coatSize: user.coatSize || '外套尺寸*',
      guestFlag: user.guestFlag.toString() || '选择状态*',
      vaccinationDetails: user.vaccinationDetails || '是否已经接种过新冠疫苗*',
      departureCity: user.departureCity || ''
    }

  },
  watch: {
    '$route': {
      handler: function (to, from) {
        this.loadData()
      },
      immediate:true
    }
  },
  methods: {
    loadData () {
      getUserInfo().then(res => {
        console.log(res)
        if (res.code === 200) {
          getGuestAuto()
          getTravelAuto()
          this.userInfo = res.data
          localStorage.setItem('overnight_userInfo', JSON.stringify(res.data))
          const user = res.data
          this.form = {
            id: user.id,
            salution: user.salution || this.$t('userForm.salutation'),
            firstName: user.firstName || '',
            lastName: user.lastName || '',
            preferredBadgeFirstName: user.preferredBadgeFirstName || '',
            preferredBadgeLastName: user.preferredBadgeLastName || '',
            companyName: user.companyName || '',
            jobTitle: user.jobTitle || '',
            mobilePhoneNumber: user.mobilePhoneNumber || '',
            mobilePhoneType: user.mobilePhoneType || '',
            businessEmailAddress: user.businessEmailAddress || '',
            assistantFirstName: user.assistantFirstName || '',
            assistantLastName: user.assistantLastName || '',
            assistantEmail: user.assistantEmail || '',
            assistantPhoneNumber: user.assistantPhoneNumber || '',
            coatSize: user.coatSize || '外套尺寸*',
            guestFlag: user.guestFlag.toString() || '选择状态*',
            vaccinationDetails: user.vaccinationDetails || '是否已经接种过新冠疫苗*',
            departureCity: user.departureCity || ''
          }
        }
      })
    },
    next() {
      this.$router.push({
        path: this.$i18n.path('userInfo')
      })
    },
    handleSubmit() {
      const that = this
      console.log(this.form)
      updateUserInfo(this.form).then(res => {
        console.log(res)
        if (res.data) {
          that.next()
        } else {
          const msg = res.message.split('$$')[0]
          this.alertShow = true
          this.alertContent = msg
        }
      })
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-top: 60px;
  padding-left: 120px;
  padding-bottom: 120px;
}
.register-container > p {
  font-size: 14px;
  color: #999999;
  margin-bottom: 14px;
}
.create-text {
  padding-top: 0px;
}

.create-text .title {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
  padding-bottom: 18px;
}

.create-text .desc {
  font-size: 14px;
  color: #999999;
}

.create-text .desc a {
  color: #0068B5;
  text-decoration: none;
}

.form {
  /*padding-top: 24px;*/
}

.register-input {
  margin-top: 16px;
  width: 100%;
}

.input-group {
  width: 100%;
  display: flex;
}

.divider-space {
  width: 32px;
  height: 60px;
  display: inline-block;
}
.divider {
  width: 100%;
  height: 40px;
  display: block;
}
.password-prompt {
  font-size: 14px;
  color: #999999;
}

.primary-button {
  width: 146px;
  height: 36px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  background: #0068B5;
  cursor: pointer;
  margin-top: 16px;
}
.ghost-button {
  width: 146px;
  height: 36px;
  color: #0068B5;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  border: 1px solid #0068B5;
  cursor: pointer;
  margin-top: 16px;
}

.password-prompt {
  padding-top: 10px;
}

.text-green {
  color: green;
  text-decoration: underline;
}

.guest-title {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
  margin-top: 22px;
}
</style>
